<template>
  <div>
    <div class="table-operator">
      <a-button v-action:add type="primary" icon="check-circle" @click="validate" :loading="confirmLoading">保存</a-button>
      <a-button v-action:add icon="rollback" @click="handleGoBack">返回</a-button>
    </div>
    <a-card class="card" title="服务商基本信息">
      <a-form @submit="handleSubmit" :form="form" class="form">
        <a-row class="form-row" :gutter="96">
          <a-col :lg="8" :md="12" :sm="24">
            <a-form-item label="服务商名称">
              <a-input placeholder="服务商名称"
                       v-decorator="['name', {rules: [{ required: true, message: '必输', whitespace: true}]} ]"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>

    <a-card class="card" title="微信支付配置">
      <a-form @submit="handleSubmit" :form="form" class="form">
        <a-row class="form-row" :gutter="96">
          <a-col :lg="8" :md="12" :sm="24">
            <a-form-item label="服务商公众号appid">
              <a-input placeholder="微信APPID" v-decorator="['wxAppId', {rules: []} ]"/>
            </a-form-item>
          </a-col>
          <a-col :lg="8" :md="12" :sm="24">
            <a-form-item label="微信商户号">
              <a-input placeholder="微信商户号" v-decorator="['wxMchId', {rules: []} ]"/>
            </a-form-item>
          </a-col>
          <a-col :lg="8" :md="12" :sm="24">
            <a-form-item label="微信商户密钥">
              <a-input placeholder="微信商户密钥" v-decorator="['wxMchKey', {rules: []} ]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="form-row" :gutter="96">
          <a-col :lg="8" :md="12" :sm="24">
            <a-form-item label="微信p12证书">
              <a-input placeholder="微信p12证书" v-decorator="['wxKeyPath', {rules: []} ]"/>
            </a-form-item>
          </a-col>
          <a-col :lg="8" :md="12" :sm="24">
            <a-form-item label="微信ApiV3密钥">
              <a-input placeholder="微信ApiV3密钥" v-decorator="['wxApiV3Key', {rules: []} ]"/>
            </a-form-item>
          </a-col>
          <a-col :lg="8" :md="12" :sm="24">
            <a-form-item label="微信商户证书序列号">
              <a-input placeholder="微信商户证书序列号" v-decorator="['wxMchSerialNo', {rules: []} ]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="form-row" :gutter="96">
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label="微信商户私钥">
              <a-textarea placeholder="微信商户私钥" v-decorator="['wxPrivateKey', {rules: []} ]" :rows="4"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>

    <a-card class="card" title="支付宝配置">
      <a-form @submit="handleSubmit" :form="form" class="form">
        <a-row class="form-row" :gutter="96">
          <a-col :lg="8" :md="12" :sm="24">
            <a-form-item label="支付宝应用ID">
              <a-input placeholder="支付宝应用ID" v-decorator="['aliAppId', {rules: []} ]"/>
            </a-form-item>
          </a-col>
          <a-col :lg="8" :md="12" :sm="24">
            <a-form-item label="支付宝分润PID">
              <a-input placeholder="支付宝分润PID" v-decorator="['providerId', {rules: []} ]"/>
            </a-form-item>
          </a-col>
          <a-col :lg="8" :md="12" :sm="24">
            <a-form-item label="应用公钥证书(appCertPublicKey)">
              <a-input placeholder="应用公钥证书(appCertPublicKey)" v-decorator="['appCertPublicKey', {rules: []} ]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="form-row" :gutter="96">
          <a-col :lg="8" :md="12" :sm="24">
            <a-form-item label="支付宝公钥证书(alipayCertPublicKey)">
              <a-input placeholder="支付宝公钥证书(alipayCertPublicKey)" v-decorator="['alipayCertPublicKey', {rules: []} ]"/>
            </a-form-item>
          </a-col>
          <a-col :lg="8" :md="12" :sm="24">
            <a-form-item label="支付宝根证书(alipayRootCert)">
              <a-input placeholder="支付宝根证书(alipayRootCert)" v-decorator="['alipayRootCert', {rules: []} ]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="form-row" :gutter="96">
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label="支付宝公钥">
              <a-textarea placeholder="支付宝公钥" v-decorator="['aliPublicKey', {rules: []} ]" :rows="4"/>
            </a-form-item>
          </a-col>
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label="支付宝应用私钥">
              <a-textarea placeholder="支付宝应用私钥" v-decorator="['aliPrivateKey', {rules: []} ]" :rows="4"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
  </div>
</template>

<script>
  import pick from 'lodash.pick'
  import { saveOrUpdate } from '@/api/system/company'
  /**
   * 数据
   */
  const data = function() {
    return {
      id: null,
      visible: false,
      confirmLoading: false,
      isDisabled: false,
      form: this.$form.createForm(this)
    }
  }

  const created = function() {
    this.$nextTick(() => {
      this.loadEditInfo(this.record)
    })
  }

  export default {
    props: {
      record: {
        type: [Object, String],
        default: ''
      }
    },
    data: data,
    created: created,
    /**
     * 方法
     */
    methods: {
      handleGoBack () {
        this.$emit('onGoBack')
      },
      handleSubmit (e) {
        e.preventDefault()
      },
      validate () {
        const { form: { validateFields } } = this
        this.confirmLoading = true
        validateFields((errors, values) => {
          if (!errors) {
            values.id = this.id
            saveOrUpdate(values).then((res) => {
              this.confirmLoading = false
              if (res.code === 200) {
                this.handleGoBack()
              }
            })
          } else {
            this.confirmLoading = false
          }
        })
      },
      loadEditInfo (record) {
        if (!record) {
          return
        }
        this.id = record.id
        const { form } = this
        const formData = pick(record, ['name', 'wxAppId', 'wxMchId', 'wxMchKey', 'wxKeyPath', 'providerId', 'aliAppId',
          'aliPublicKey', 'aliPrivateKey', 'appCertPublicKey', 'alipayCertPublicKey', 'alipayRootCert', 'wxApiV3Key', 'wxMchSerialNo', 'wxPrivateKey'])
        form.setFieldsValue(formData)
      }
    },
  }
</script>

<style lang="less" scoped>
  .card {
    margin-bottom: 24px;
  }

  .popover-wrapper {
    /deep/ .antd-pro-pages-forms-style-errorPopover .ant-popover-inner-content {
      min-width: 256px;
      max-height: 290px;
      padding: 0;
      overflow: auto;
    }
  }

  .antd-pro-pages-forms-style-errorIcon {
    user-select: none;
    margin-right: 24px;
    color: #f5222d;
    cursor: pointer;

    i {
      margin-right: 4px;
    }
  }

  .antd-pro-pages-forms-style-errorListItem {
    padding: 8px 16px;
    list-style: none;
    border-bottom: 1px solid #e8e8e8;
    cursor: pointer;
    transition: all .3s;

    &:hover {
      background: #e6f7ff;
    }

    .antd-pro-pages-forms-style-errorIcon {
      float: left;
      margin-top: 4px;
      margin-right: 12px;
      padding-bottom: 22px;
      color: #f5222d;
    }

    .antd-pro-pages-forms-style-errorField {
      margin-top: 2px;
      color: rgba(0, 0, 0, .45);
      font-size: 12px;
    }
  }
</style>